<template>
    <div class="page_con" @click="toLogin">
        <!-- <div class="today_hello">早安：别怕风雨兼程</div> -->
        <div v-if="music.url || music.androidAduioCtx" class="music_logo" :class="{pause_music: !music.playing}" @click="playMusic">
            <image src="/static/images/zwf-music.webp" mode="" />
        </div>
        <div class="img_con">
            <image :src="detail.mainFileUrl" mode="aspectFill">
            <div class="img_word">
                <div class="user">
                    <image :src="detail.headImg" class="avator">
                    <p>{{detail.userName}}</p>
                </div>
                <!-- <div class="user">
                    <image src="/static/images/logo.png" class="avator">
                    <p>易客岛</p>
                </div> -->
                <div class="day_time">
                    <p>
                        <em>{{dayInfo.day}}</em>
                        <span>{{dayInfo.month}}</span>
                    </p>
                    <p>{{dayInfo.week}} 农历:{{dayInfo.nongli}}</p>
                </div>
                <div class="daka_days">问候第 <em>{{detail.dayCnt}}</em> 天</div>
                <div v-if="!respectId" class="change_img" @click="changeImgFn">
                    <i class="icon-shuaxin mar-r5"></i>
                    换图
                </div>

            </div>
        </div>
        <div class="desc">
            <p> {{detail.mainText}} </p>
            <template v-if="!respectId">
                <span @click="copyWord">复制文字</span>
                <span class="mar-l20" @click="changText">切换配文</span>
            </template>
        </div>
        <div v-if="$store.state.user.userInfo.subscribeFlag != '01'" class="gzh_qrcode pad20 flex-end">
            <div class="flex-column flex-center">
                <image class="w200" src="/static/images/gzh.jpg" mode="widthFix" />
                <span class="fs24 color-666">长按关注</span>
            </div>
            
        </div>
        <div class="change_my" v-if="respectId">
            <div class="back_material" @click="toMaterial">
                <i class="icon-arrow-left"></i>
                素材库
            </div>
            <div class="btn" @click="changeMyRespect">换成我的问候</div>
        </div>
        <div class="float_btns" v-if="!respectId">
            <div class="btn_item" @click="toMaterial">
                <i class="icon-fanhui1"></i>
                <p>素材库</p>
            </div>
            <div class="btn_item" @click="createPoster">
                <i class="icon-tupian"></i>
                <p>分享卡片</p>
            </div>
            <div class="btn_item" @click="shareMaskVisible = true">
                <i class="icon-fenxiang"></i>
                <p>分享</p>
            </div>
        </div>
        <createPoster tip="长按发送给朋友" subTip="" ref="createPoster"></createPoster>
        <uni-popup ref="imgPicker" type="bottom">
            <div class="change_img_container">
                <div class="prev_img">
                    <image :src="posterUrl"  mode="aspectFit" />
                </div>
                <div class="img_list_picker">
                    <div class="title">
                        换图
                        <i @click="$refs.imgPicker.close()" class="icon-close"></i>
                    </div>
                    <div class="list_con">
                        <div class="left">
                            <scroll-view scroll-y>
                                <p v-for="(item, index) in changeImg.types" 
                                    @click="changeImgType(item, index)"
                                    :class="{active: changeImg.actTypeIndex == index}" 
                                    :key="index">{{item}}</p>
                            </scroll-view>
                        </div>
                        <scroll-view class="img_list_view" scroll-y @scrolltolower="scrolltoBottom">
                            <div class="img_list">
                                <div class="img_item" v-for="(item, index) in changeImg.imgList" :key="index">
                                    <image 
                                        @click="chooseImg(item)"
                                        :class="{active: item.id == changeImg.actImgId}" 
                                        :src="item.materialURL" mode="" />
                                    <span>{{ item.jrjqFlag == '01' ? item.type : ''}}</span>
                                </div>
                            </div>
                            <pub-list-end :loading="changeImg.scroll.loading" :max="changeImg.scroll.max" :noData="changeImg.scroll.noData"></pub-list-end>
                        </scroll-view>
                    </div>
                </div>
            </div>
        </uni-popup>
        <div class="share_mask" v-if="shareMaskVisible" @click="shareMaskVisible = !shareMaskVisible">
            <image src="@/static/images/zwf-fastShare.webp" mode="widthFix" />
        </div>

        <audio v-if="music.url" :src="music.url" loop="loop" autoplay id="media"></audio>
        <gzhPopup ref="gzhPopup"></gzhPopup>
    </div>
</template>

<script>
import createPoster from '@/components/pages/createPoster'
import { getImgTemp, drawCircleImage, createQRcode, canvasMultiLineText } from '@/utils/draw'
import { getPlatTypes } from '@/request/relationship'
import { getUserShareInfo, shareDynamic, updateShareTemp } from '@/request/art'
import { getImgMateriaList,getUserSignInfo, userDaySign, updateSignInfoFile, getRandImproveText } from '@/request/respect'
import gzhPopup from '@/components/pages/gzh-popup'
import {Howl, Howler} from 'howler';
let sysInfo = uni.getSystemInfoSync();

export default {
    components: {
        createPoster,
        gzhPopup
    },
    data() {
        return {
            music: {
                url: '',
                playing: false,
                androidAduioCtx: null
            },
            shareMaskVisible: false,
            posterUrl: '',
            respectId: '',

            tempShareKey: (new Date().getTime().toString(32)) + (Math.random().toString(32).slice(2)), //前端生成的分享id,要传给后台的
            shareKey: '',
            fromUserId: '',
            dayInfo: {
                week: '',
                nongli: '',
                day: '',
                month: '',
            },
            detail: {
                id: '',
            },
            changeImg: {
                actTypeIndex: 0,
                types: [ ],
                actImgId: '',
                imgList: [],
                scroll: {
                    page: 1,
                    size: 30,
                    loading: false,
                    max: false,
                    noData: false,
                }
            }

        }
    },
    computed: {

    },
    async onLoad(options) {
        // await this.toLogin()
        if(options.shareKey) this.shareKey = options.shareKey;
        if(options.id) this.respectId = options.id;
        if(options.isPoster && this.mixinLoginStatus) {
            await updateShareTemp({ frontKey: this.shareKey })
        }
        if(this.shareKey) {
            await this.getShareInfo()
        }
        if(options.id) {
            this.getDetail(options.id)
        } else {
            this.getDayInfo()
        }
    },
    onUnload() {
        this.playMusic('stop')
    },
    methods: {
        getShareInfo() {
            return new Promise((resolve, reject) => {
                getUserShareInfo({
                    frontKey: this.shareKey
                }).then(res => {
                    this.fromUserId = res.data.fromUserId
                    uni.setStorageSync( 'shareUserId', res.data.fromUserId)
                    resolve()
                })
            })
        },
        shareArt(shareType) {
            if(!this.mixinLoginStatus) return;
            let data = {
                frontKey: this.fromUserId == this.$store.state.user.userInfo?.userId ? this.shareKey : this.tempShareKey,
                fromKey: this.fromUserId == this.$store.state.user.userInfo?.userId ? void 0 : this.shareKey || void 0,
                dynamicId: this.detail.id,
                refType: "01"
            }
            if(shareType == 'poster') {
                data.tempFlag = '01'
                data.shareType = '00'
            } else {
                data.shareType = shareType //00群聊，01朋友圈
            }
            shareDynamic(data).then(res => {
                if(process.env.NODE_ENV == 'development') {
                    this.$interact.toast('分享成功')
                } else {
                    if(shareType != 'poster') {
                        this.$interact.toast('分享成功')
                    }
                }
            })
        },
        getDayInfo(){
            userDaySign().then(r => {
                this.getDetail(r.data.signInfo.id)
            })
        },
        getDetail(id) { 
            getUserSignInfo({ id, frontKey: this.shareKey || void 0 }).then(res => {                    
                this.dayInfo.week = '星期' + res.data.huangLiInfo.week
                this.dayInfo.nongli = res.data.huangLiInfo.nongli.slice(7)
                this.dayInfo.month = res.data.signInfo.signDate.slice(0, 4) + '.' + res.data.signInfo.signDate.slice(4, 6)
                this.dayInfo.day = res.data.signInfo.signDate.slice(-2)
                this.detail = res.data.signInfo
                this.music.url = res.data.signInfo.backMiusicUrl
                if(sysInfo.platform == 'android') {
                    this.initAndroidMusic(res.data.signInfo.backMiusicUrl)
                }
                this.$nextTick(() => {
                    // document.addEventListener('WeixinJSBridgeReady', () => {
                    //     console.log('WeixinJSBridgeReady123');
                        
                    // })
                    this.setWxconfig()
                    this.drawPoster()
                })
            })
        },
        async changeImgFn() {
            await this.$toLogin()
            this.$refs.imgPicker.open()
            this.getImgTypes()

        },
        getImgTypes() {
            // getPlatTypes({
            //     typeKind: '01'
            // }).then(res => {
            //     this.changeImg.types = res.data
            //     this.changeImgType(res.data[0], 0)
            // })
            let types = [ '日常', '节日节气' ]
            this.changeImg.types = types
            this.changeImgType(types[0], 0)
        },
        changeImgType(item, index) {
            if(index !== undefined) {
                this.changeImg.actTypeIndex = index
            }
            this.onRefresh()
        },
        scrolltoBottom() {
            this.onInfinite()
        },
        getImgList(complete) {            
            getImgMateriaList({
                pageIndex: this.changeImg.scroll.page,
                pageSize: this.changeImg.scroll.size,
                jrjqFlag: this.changeImg.types[this.changeImg.actTypeIndex] == '节日节气' ? '01' : '00',
            }, { complete }).then(res => {
                this.changeImg.imgList = this.changeImg.scroll.page == 1 ? res.data.list : this.changeImg.imgList.concat(res.data.list)
                this.changeImg.scroll.max = this.changeImg.imgList.length >= res.data.total
                this.changeImg.scroll.noData = res.data.total == 0
            })
        },
        // 重头第一页刷新列表
        onRefresh() {
            this.changeImg.scroll.loading = true
            this.changeImg.scroll.max = false
            this.changeImg.scroll.noData = false
            this.changeImg.scroll.page = 1
            this.changeImg.imgList = []
            this.getImgList(() => {
                this.changeImg.scroll.loading = false;
                uni.stopPullDownRefresh()
            })
        },
        // 滚动到底部加载
        onInfinite() {
            if(this.changeImg.scroll.loading || this.changeImg.scroll.max) return
            this.changeImg.scroll.loading = true
            this.changeImg.scroll.page += 1
            this.getImgList(() => {
                this.changeImg.scroll.loading = false
            })
        },
        chooseImg(item) {
            this.changeImg.actImgId = item.id
            this.detail.mainFileUrl = item.materialURL
            this.drawPoster()
            this.updateChange({
                mainFileUrl: item.materialURL
            })
        },
        async copyWord() {
            await this.$toLogin()
            uni.setClipboardData({
                data: this.detail.mainText,
                success: () => {
                    this.$interact.toast('已复制')      
                }
            })
        },
        async changText(){
            await this.$toLogin()
            getRandImproveText().then(res => {
                this.detail.mainText = res.data.textWord
                this.playMusic('stop');
                this.music.playing = false
                this.music.url = ''
                this.music.androidAduioCtx = null
                this.$nextTick(async() => {
                    if(sysInfo.platform == 'android') {
                        await this.initAndroidMusic(res.data.musicUrl)
                    } else {
                        this.music.url = res.data.musicUrl
                        this.$nextTick(() => {
                            this.playMusic()
                        })
                    }
                })
                this.updateChange({
                    mainText: res.data.textWord,
                    backMiusicUrl: res.data.musicUrl || ''
                })
            })
        },
        updateChange(params) {
            updateSignInfoFile({
                id: this.detail.id,
                ...params
            })
        },
        initAndroidMusic(src) {
            this.music.androidAduioCtx = new Howl({
                src: [src],
                autoplay: true,
                loop: true,
                onpause: (e) => {
                    console.log(e, 'onPause');
                    this.music.playing = false
                },
                onplay: (e) => {
                    console.log(e, 'onplay');
                    this.music.playing = true
                },
                onstop: (e) => {
                    console.log(e, 'stop');
                    this.music.playing = false
                }
            })
        },
        playMusic(type) {
            if(!this.music.url && !this.music.androidAduioCtx) return;
            if(sysInfo.platform == 'ios') {
                let mediaW = document.getElementById('media')
                let media = mediaW.getElementsByTagName('audio')[0]
                if(type == 'stop') {
                    this.music.playing = false
                    media.pause()
                    // media.stop()
                } else if(media.paused) {
                    this.music.playing = true
                    media.play()
                } else {
                    this.music.playing = false
                    media.pause()
                }
            } else if(sysInfo.platform == 'android') {
                if(type == 'stop') {
                    this.music.androidAduioCtx.stop()
                } else if(this.music.playing) {
                    this.music.androidAduioCtx.pause()
                } else {
                    this.music.androidAduioCtx.play()
                }
            }
        },
        async toMaterial() {
            await this.$toLogin()
            await this.checkGZHstatus()
            this.$navigate.to('/pages/material')
        },
        async changeMyRespect() {
            await this.$toLogin()
            await this.checkGZHstatus()
            location.replace('/pages/respect/index')
        },
        async createPoster() {
            await this.drawPoster()
            this.$refs.createPoster.alertPoster(this.posterUrl)
            this.shareArt('poster')
        },
        
        getShareLink() {
            let linkQueryStr = this.$qs.stringify({                    
                id: this.detail.id,
                shareKey: this.fromUserId == this.$store.state.user.userInfo?.userId ? this.shareKey : this.tempShareKey,
                inviteUserId: this.mixinLoginStatus ? this.$store.state.user.userInfo.userId : ''
            })
            let link = location.origin +  location.pathname + '?' + linkQueryStr
            console.log(link);
            return link
        },
        setWxconfig() {
            let that = this
            const formatShareData = () => {
                let desc = this.detail.mainText
                desc = desc && desc.slice(0, 300) || ''
                let shareData = {
                    title: `${this.detail.userName}的第${this.detail.dayCnt}天问候` , // 分享标题
                    desc, // 分享描述
                    link: this.getShareLink(), // 分享链接
                    imgUrl: this.detail.mainFileUrl, // 分享图标
                } 

                jWeixin.onMenuShareTimeline({
                    ...shareData,
                    success: function () {
                        // 用户确认分享后执行的回调函数
                        that.shareArt('01')
                    }
                })
                jWeixin.onMenuShareAppMessage({
                    ...shareData,
                    success: function () {
                        // 用户确认分享后执行的回调函数
                        that.shareArt('00')
                    }
                })
                if(sysInfo.platform == 'ios') {
                    this.playMusic()
                } else {
                    this.music.playing = true
                }
            }
            if(this.mixinIsDevRunTime) {
                formatShareData()
            } else {
                this.$wxConfig().then(formatShareData)
            }
        },
        
        checkGZHstatus() {
            return new Promise((resolve, reject) => {
                if(this.$store.state.user.userInfo.subscribeFlag == '01' || this.canEdit) { //有关注过公众号或者已经进入可编辑状态
                    resolve()
                } else {
                    this.$refs.gzhPopup.open({
                        refType: '02',
                        refId: this.detail.id,
                    })
                }
            })
        },
        toLogin() {
            this.$toLogin()
        },
        drawPoster() {
            return new Promise(async (resolve, reject) => {
                try {
                    uni.showLoading({ title: '正在生成海报' });
                    var canvas = document.createElement('canvas')
                    const ctx = canvas.getContext('2d')
                    canvas.width = 500
                    canvas.height = 850
    
                    ctx.fillStyle = "#fff";
                    ctx.fillRect(0, 0, 500, 850);
    
                    let mainPic = await getImgTemp(this.detail.mainFileUrl)
                    ctx.drawImage(mainPic, 0, 0, 500, 500); //绘制图
    
                    // ctx.fillStyle = "rgba(0,0,0,0.3)";
                    // ctx.fillRect(45, 24, 360, 52);
    
                    // ctx.beginPath();  
                    // ctx.arc(405, 50, 26,  1.5 * Math.PI, 0.5*Math.PI);  
                    // ctx.closePath();  
                    // ctx.fill()
    
                    // ctx.font = 'bold 26px sans-serif';
                    // ctx.fillStyle = "#fff";
                    // ctx.fillText('别怕风雨兼程', 90, 60);
    
                    if(this.detail.headImg) {
                        let avatorPic = await getImgTemp(this.detail.headImg)
                        drawCircleImage(ctx, avatorPic, 50, 50, 26 )
                    }
    
                    ctx.fillStyle = "orange";
                    ctx.fillRect(410, 425, 26, 6);
    
                    ctx.shadowOffsetX = 0
                    ctx.shadowOffsetY = 0
                    ctx.shadowColor = '#666'
                    ctx.shadowBlur = 10
                    ctx.fillStyle = "#fff";
    
                    
                    ctx.textAlign = 'right'
                    ctx.font = 'normal 22px sans-serif';
                    ctx.fillText(`${this.dayInfo.week}  农历:${this.dayInfo.nongli}`, 480, 480);
    
                    ctx.font = 'normal 20px sans-serif';
                    ctx.fillText(this.dayInfo.month, 480, 410);
    
                    ctx.font = 'bold 48px serif';
                    ctx.fillText(this.dayInfo.day, 385, 430);
    
                    ctx.textAlign = 'left'
                    ctx.font = 'normal 22px sans-serif';
                    ctx.fillText(`问候第            天`, 20, 480);
    
                    ctx.textAlign = 'center'
                    ctx.font = 'bold 46px serif';
                    ctx.fillText(this.detail.dayCnt, 120, 480);
    
                    ctx.shadowBlur = 0
    
                    ctx.textAlign = 'left'
                    ctx.fillStyle = "#333";
                    ctx.font = 'normal 20px sans-serif';
                    let words = canvasMultiLineText(ctx, this.detail.mainText, 450, 6)
                    words.forEach((item, index) => {
                        ctx.fillText(item, 18, 530 + index * 36);
                    })
    
                    ctx.fillText('来自：' + this.detail.userName, 15, 830);

                    ctx.font = 'normal 18px sans-serif';
                    ctx.fillText('扫码问候', 415, 750);
                    let link = this.getShareLink() + '&isPoster=1'
                    console.log(link);
                    let qrcodeBase64 = await createQRcode(link)
                    let qrcodePic = await getImgTemp(qrcodeBase64)
                    ctx.drawImage(qrcodePic, 410, 760, 80, 80); //绘制图
    
                    uni.hideLoading();
    
                    let imgUrl = canvas.toDataURL('images/jpeg', 1)
                    this.posterUrl = imgUrl
                    resolve(imgUrl)
                } catch(err) {
                    console.error(err)
                }
            })
        },
    }

}
</script>

<style lang="less" scoped>
.page_con{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #fff;
    padding-top: 100rpx;
    padding-bottom: 150rpx;
}
.music_logo{
    width: 60rpx;
    height: 60rpx;
    background: #666;
    border-radius: 50%;
    position: fixed;
    top: 20rpx;
    right: 20rpx;
    z-index: 100;
    .align(center);
    animation: rotateMusic 5s linear infinite;
    &.pause_music{
        animation: none;
        &::after{
            content: "";
            position: absolute;
            transform: rotate(-45deg);
            width: 2px;
            height: 40rpx;
            background: #ccc;
        }
    }
    image{
        width: 40rpx;
        height: 40rpx;
    }   
}

@keyframes rotateMusic {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
.today_hello{
    line-height: 80rpx;
    font-size: 40rpx;
    font-weight: bold;
    padding: 0 30rpx;

}
.img_con{
    width: 690rpx;
    height: 690rpx;
    margin: 0 auto;
    position: relative;
    >image{
        width: 100%;
        height: 100%;
        border-radius: 30rpx;
    }
    .img_word{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        padding: 30rpx;
        color: #fff;
        text-shadow: 0 0 10rpx #666;
        .user{
            display: flex;
            align-items: center;
            .avator{
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
            }
            p{
                font-size: 40rpx;
                font-weight: bold;
                padding-left: 20rpx;
            }
        }
        .day_time{
            position: absolute;
            bottom: 45rpx;
            right: 30rpx;
            font-size: 28rpx;
            text-align: right;
            p{
                margin-top: 10rpx;
            }
            em{
                font-size: 70rpx;
                font-family: serif;
                padding: 20rpx;
                font-weight: bold;
            }

        }
        .daka_days{
            position: absolute;
            bottom: 30rpx;
            left: 30rpx;
            font-size: 32rpx;
            em{
                font-size: 60rpx;
                font-family: serif;
                padding: 20rpx;
            }
        }
        .change_img{
            position: absolute;
            top: 30rpx;
            right: 30rpx;
            width: 140rpx;
            height: 60rpx;
            border-radius: 40rpx;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 0 10rpx #666;
            .align(center);
            color: #333;
            text-shadow: none;
        }
    }
}

.desc{
    padding: 30rpx;
    font-size: 36rpx;
    line-height: 1.8;
    >span{
        color: #154b71;
        text-decoration: underline;
    }
}

.change_my{
    width: 100%;
    height: 80rpx;
    display: flex;
    position: fixed;
    bottom: 20rpx;
    padding: 0 30rpx;
    left: 0;
    >div{
        .align(center);
        &.back_material{
            color: @mainColor;
            flex: 1;
            justify-content: flex-start;
            i{
                font-weight: bold;
                font-size: 24rpx;
                color: @mainColor;
                margin-right: 15rpx;
            }
        }
        &.btn{
            width: 520rpx;
            height: 80rpx;
            background: @mainColor;
            border-radius: 40rpx;
            color: #fff;
            
        }

    }
}

.float_btns{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100rpx;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1px solid #ddd;
    z-index: 10;
    .btn_item{
        flex: 1;
        .align(center, column);
        position: relative;
        &::after{
            content: "";
            width: 1rpx;
            height: 50rpx;
            top: 25rpx;
            right: 0;
            position: absolute;
            background: #ddd;
        }
        i{
            font-size: 30rpx;
        }
        p{
            font-size: 28rpx;
        }
    }
}

.change_img_container{
    height: 100vh;
    width: 100%;
    background: #f3f3f3;
    display: flex;
    flex-direction: column;
    .prev_img{
        flex: 1;
        padding: 30rpx;
        image{
            width: 100%;
            height: 100%;
        }
    }
    
}

.img_list_picker{
    flex-shrink: 0;
    width: 100%;
    height: 45vh;
    background: #fff;
    border-radius: 30rpx 30rpx 0 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 9999;
    box-shadow: 0 0 20rpx #ddd;
    .title{
        flex-shrink: 0;
        width: 100%;
        height: 90rpx;
        border-bottom: 1px solid #ddd;
        color: @mainColor;
        line-height: 90rpx;
        padding: 0 30rpx;
        position: relative;
        i{
            position: absolute;
            right: 20rpx;
            top: 0;
            height: 90rpx;
            color: #999;
            .align(center);
        }
    }

    .list_con{
        flex: 1;
        height: 1px;
        display: flex;
        .left{
            width: 170rpx;
            height: 100%;
            background: #f3f3f3;
            scroll-view{
                width: 100%;
                height: 100%;
                overflow: auto;
            }
            p{
                height: 90rpx;
                text-align: center;
                font-size: 28rpx;
                line-height: 80rpx;
                position: relative;
                color: #666;
                &.active{
                    color: @mainColor;
                    background: #fff;
                }
            }

        }
        .img_list_view {
            flex: 1;
            height: 100%;
            background: #fff;
            padding: 0 20rpx;
            .img_list{
                display: flex;
                flex-wrap: wrap;
                padding-top: 10rpx;
                .img_item{
                    width: 180rpx;
                    // height: 180rpx;
                    .align(center);
                    image{
                        width: 150rpx;
                        height: 150rpx;
                    }
                    span{
                        width: 100%;
                        line-height: 30rpx;
                        text-align: center;
                        font-size: 26rpx;
                        margin:10rpx auto 30rpx;
                    }    
                    .active{
                        border: 1px solid @mainColor;
                    }
                }
            }

        }

    }

    
}

.share_mask{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 100;
    image{
        width: 400rpx;
        position: absolute;
        top: 10rpx;
        right: 20rpx;
    }
}

</style>